<template>
	<view class="my">
		<view class="bg">
			<!-- <image
				src="https://note.mafengwo.net/img/f0/fd/8560df9ea60a6444211bab70faef4358.jpeg?imageMogr2%2Fthumbnail%2F%21450x270r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21450x270%2Fquality%2F90"
				mode="aspectFill">
			</image> -->
			<image v-if="hasLogin && userInfo.avatar_file && userInfo.avatar_file.url" :src="userInfo.avatar_file.url"
				mode="aspectFill"></image>
			<image v-else
				src="https://mp-353864e0-55e9-470c-ba50-fc62e6999017.cdn.bspapp.com/cloudstorage/16a7b803-1953-4f1e-a4f1-36ec7473bf06.jpg"
				mode="aspectFill"></image>
		</view>
		<!-- 已经登陆 -->
		<view v-if="hasLogin && userInfo.avatar_file && userInfo.avatar_file.url" class="userContent"
			@click="toUserInfo">
			<view class="user">
				<image :src="userInfo.avatar_file.url" mode="aspectFill"></image>
				<view class="userName">
					<view class="text">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</view>
					<view class="year">
						<uni-dateformat :date="userInfo.register_date" :threshold="[3600,99*365*24*60*60*1000]">
						</uni-dateformat>
						注册
					</view>

				</view>
			</view>
			<!-- <view class="loginbutton">
				点击登录
			</view> -->
			<uni-icons type="forward" size="30" color="#8adcff"></uni-icons>
		</view>
		<!-- 未登录时 -->
		<view v-else class="userContent" @click="goLogin()">
			<view class="user">
				<image
					src="https://mp-353864e0-55e9-470c-ba50-fc62e6999017.cdn.bspapp.com/cloudstorage/16a7b803-1953-4f1e-a4f1-36ec7473bf06.jpg"
					mode="aspectFill"></image>
				<view class="goLogin"> 点击登录</view>
			</view>
			<!-- <view class="loginbutton">
				点击登录
			</view> -->
			<uni-icons type="forward" size="30" color="#8adcff"></uni-icons>
		</view>


		<view class="content marginTop100">
			<view class="userLike">
				<view>
					<uni-icons type="compose" color="#8adcff" size="20"></uni-icons> 我发布了<text class="num">99</text>
					篇黔程攻略
				</view>
			</view>
			<view class="userLike">
				<view>
					<uni-icons type="eye" color="#8adcff" size="20"></uni-icons> 共获得 <text class="num">88</text> 浏览量
				</view>
			</view>
			<view class="userLike">
				<view>
					<uni-icons type="star" color="#8adcff" size="20"></uni-icons> 共获得 <text class="num">77</text> 点赞
				</view>
			</view>
		</view>
		<view class="content">
			<view class="userLike" @click="goMyArtList">
				<view>
					<uni-icons type="compose" color="#8adcff" size="20"></uni-icons> 我的攻略
				</view>
				<view>
					<uni-icons type="forward" color="#8adcff" size="20"></uni-icons>
				</view>
			</view>
			<view class="userLike" @click="goMyLikeList">
				<view>
					<uni-icons type="star" color="#8adcff" size="20"></uni-icons> 我的点赞
				</view>

				<view>
					<uni-icons type="forward" color="#8adcff" size="20"></uni-icons>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="userLike" @click="logout">
				<view>
					<uni-icons type="locked" color="#8adcff" size="20"></uni-icons>退出登录
				</view>
				<uni-icons type="forward" color="#8adcff" size="20"></uni-icons>
			</view>

		</view>
		<!-- 公司标识 -->
		<view class="copyright">
			州游黔程提供计算服务<br />
			COPYRIGHT©2022-2023<br />
			ZhouYouQianCheng
		</view>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		computed: {
			userInfo() {
				return store.userInfo
			},
			hasLogin() {
				return store.hasLogin
			}
		},
		methods: {
			goMyArtList() {
				if (this.goLoginPage()) return
				uni.navigateTo({
					url: '/pages/zyqc_art/list'
				})
			},
			goMyLikeList() {
				if (this.goLoginPage()) return
				uni.navigateTo({
					url: '/pages/zyqc_like/list'
				})
			},

			toUserInfo() {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
				})
			},
			goLogin() {
				uni.navigateTo({
					url: "/uni_modules/uni-id-pages/pages/login/login-withpwd"
				})
			},
			// 退出登录
			logout() {
				if (this.goLoginPage()) return
				uni.showModal({
					title: '是否确认退出',
					success: res => {
						if (res.confirm) {
							mutations.logout()
						}
					}
				})
			},
			goLoginPage() {
				if (!this.hasLogin) {
					uni.showToast({
						title: '未登录',
						icon: 'none'
					})
					return true
				}
				return false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my {
		position: relative;
		// height: 3000rpx;

		.bg {
			height: 420rpx;

			image {
				width: 100%;
				height: 100%;
				filter: blur(20px);
				transform: scale(1.5);
				opacity: 0.5;
			}
		}

		.userContent {
			position: absolute;
			top: 340rpx;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// background-color: #dbebeb;
			border: 1rpx solid #8adcff;
			width: 710rpx;
			height: 160rpx;
			margin: 0 20rpx;
			border-radius: 30rpx;
			opacity: 0.9;

			.loginbutton {
				display: flex;
				margin-top: 20rpx;
				margin-right: 30rpx;
				justify-content: center;
				align-items: center;
				padding: 10rpx 20rpx;
				background-color: #6d5cdc;
				border-radius: 20rpx;
				color: #fff;
			}

			.user {
				position: relative;
				height: 100rpx;

				image {
					position: absolute;
					top: -50rpx;
					left: 30rpx;
					border-radius: 50%;
					border: 2rpx solid #6d5cdc;
					width: 120rpx;
					height: 120rpx;
					box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.8);
				}

				.goLogin {
					color: #6d5cdc;
					font-size: 60rpx;
					padding-left: 200rpx;
				}


				.userName {
					font-size: 30rpx;
					color: #000;
					padding-left: 200rpx;

					.text {
						color: #6d5cdc;
						font-weight: 900;
						font-size: 60rpx;
						// padding-left: 200rpx;
					}
				}
			}

		}

		.content {
			padding: 10rpx;
			background-color: #fff;
			border-radius: 8rpx;
			margin: 20rpx;

			.userLike {
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				margin: 20rpx;

				uni-icons {
					padding-right: 30rpx;
				}

				.num {
					color: #6d5cdc;
					font-weight: 900;
				}
			}
		}

		.marginTop100 {
			margin-top: 100rpx;
		}
	}
</style>
